const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let x = canvas.width / 2;
let y = canvas.height / 2;
let dx = 2;
let dy = -2;
const squareSize = 20;

function drawSquare() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.rect(x, y, squareSize, squareSize);
    ctx.fillStyle = '#0095DD';
    ctx.fill();
    ctx.closePath();
}

function moveSquare() {
    x += dx;
    y += dy;
    if (x + dx > canvas.width - squareSize || x + dx < 0) {
        dx = -dx;
    }
    if (y + dy > canvas.height - squareSize || y + dy < 0) {
        dy = -dy;
    }
}

function updateGame() {
    moveSquare();
    drawSquare();
    requestAnimationFrame(updateGame);
}

updateGame();
